<style include="edu-coexistence-css">
  paper-spinner-lite {
    --spinner-size: 38px;
    display: none;
    height: var(--spinner-size);
    margin-bottom: 28px;
    width: var(--spinner-size);
  }

  paper-spinner-lite[active] {
    display: inline-block;
  }

  .spinner-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
  }
</style>

<edu-coexistence-template>
  <span slot="main">
    <div class="new-oobe-layout-back-button" hidden$="[[!showGaiaButtons_]]">
      <edu-coexistence-button hidden$="[[!newOobeLayoutEnabled_]]"
                              button-type="back"
         id="gaia-back-button"
         on-go-back="handleGaiaLoginGoBack_">
      </edu-coexistence-button>
    </div>

    <webview id="signinFrame" hidden$="[[loading_]]" class="signin-frame"
             allowscaling></webview>
    <div class ="spinner-container" hidden$="[[!loading_]]">
      <paper-spinner-lite class="spinner" active="[[loading_]]">
      </paper-spinner-lite>
      <div id="comment" aria-live="polite"
           aria-label$="$i18n{loadingMessage}">
          $i18n{loadingMessage}
      </div>
    </div>
  </span>
  <span slot="buttons" hidden$="[[!showGaiaButtons_]]"
        class$="[[buttonsLayoutCssClass_]]">
    <span hidden$="[[newOobeLayoutEnabled_]]">
      <edu-coexistence-button button-type="back"
        id="gaia-back-button"
        on-go-back="handleGaiaLoginGoBack_">
      </edu-coexistence-button>
    </span>
    <span>
      <gaia-action-buttons id="gaiaNextButton"
        authenticator="[[controller_.authExtHost_]]"
        rounded-button="[[newOobeLayoutEnabled_]]"
        hidden$="[[!showGaiaNextButton_]]">
      </gaia-action-buttons>
    </span>
  </span>
</edu-coexistence-template>
